import React from 'react';
import {inject, observer } from 'mobx-react';
import { WeaTop,WeaFormItem,WeaUpload,WeaSearchGroup, WeaNewScroll, WeaLocaleProvider} from 'ecCom';
import { Table, Button, Spin, Alert, Progress } from 'antd';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject("goalBaseStore", "goalCommonStore")
@observer
export default class GoalImportLog extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            loading: false,
        }
        this.num = 1;
        this.timerID = 0;
        this.columns = [
            {
                title: getLabel(23201,'行数'),
                dataIndex: 'num',
                width:"20%",
                render:(text, record, index) =>{
                    return <div style={{"color":record.color}} >{text}</div>
                }
            },
            {
              title: getLabel(84,'标识'),
              dataIndex: 'name',
              width:"20%",
              render:(text, record, index) =>{
                return <div style={{"color":record.color}} >{text}</div>
            }
            },
            {
              title: getLabel(24960,'提示信息'),
              dataIndex: 'message',
              width:"60%",
              render:(text, record, index) =>{
                  return <div style={{"color":record.color}} >{text}</div>
              }
            },
          ];
    }

    componentWillReceiveProps(newprops){

    }
    
    componentDidMount() {
        this.timerID = setInterval(
            () => this.getData(),
            500
        );
    }

    componentWillUnmount() {
        let {goalBaseStore} = this.props;
        goalBaseStore.reslutData = {};
        goalBaseStore.logList = [];
        goalBaseStore.percent = 0;
        clearInterval(this.timerID);
    }

    getData = ()=>{
        let {goalBaseStore,type} = this.props;
        let {loading} = goalBaseStore;
        if(!loading){
            clearInterval(this.timerID)
        }else{
            let {goalBaseStore} = this.props;
            goalBaseStore.getImportLog({type});
        }   
    }

    render(){
        let {goalBaseStore,loading} = this.props;
        let {reslutData, logList, percent} = goalBaseStore;
        return (
            <div className="wea-workrelate-goal-importlog">
                <Spin spinning = {loading} tip={getLabel('125679','正在导入数据')+'...'}>
                    <Alert message={getLabel(509005,'导入数据提示')}
                    description={getLabel(509006,'导入过程中,请不要中断操作,以免数据出现错误')}
                    type="info"/>
                </Spin>
                {!loading && <p style={{"text-align":"center","font-size":"14px","line-height":"50px","color":"red"}}>{reslutData.msg}</p>}              
                {loading ? <Table className="wea-workrelate-antd-table" bordered={true} scroll={{ y: window.innerHeight*0.6 - 180 }}  columns={this.columns} dataSource={toJS(logList)}></Table>:
                <Table className="wea-workrelate-antd-table" bordered={true}  scroll={{ y: window.innerHeight*0.6 - 180 }} columns={this.columns} dataSource={toJS(reslutData.list)}></Table>}
                {/* {<Progress style={{"text-align":"center","display":"block"}} type="circle" percent={percent} width={80} />}     */}
            </div>
        )
    }
}